<template>
  <div class="myclass">
    <!-- 全局组件 -->
    <headed />
    <div class="userbox">
      <div class="avatar">
        <div class="imgbox">
          <img class="imgSize" :src="imageUrl" alt="" />
        </div>
        <span>{{ userData.uname }}</span>
        <div class="callsmsg">
          <p>对应班级：{{ userData.class_name }}</p>
          <p class="person" @click="personSet">个人设置</p>
        </div>
      </div>
    </div>
    <el-tabs class="item" tab-position="left">
      <!-- 我的课程 -->
      <el-tab-pane label="我的课程">
        <ul class="courselist">
          <li
            @click="todetails(item)"
            v-for="(item, index) in mycourse"
            :key="index"
          >
            <img :src="item.tcimg" alt="" srcset="" />
            <p class="text">{{ item.tctitle }}</p>
            <div class="left">
              <span>{{ item.tctype }}</span>
              .
              <span>{{ item.tcsignup_number }}人报名</span>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <!-- 我的作业 -->
      <el-tab-pane label="我的作业">
        <div v-for="(item, index) in mywork" :key="index" class="work">
          <p class="worktitle">
            <span class="worktime">{{ item.time }} 部署作业</span>
            <button
              class="workbtn"
              :data_id="item.time"
              @click="towork($event, item)"
            >
              {{ item.status }}
            </button>
          </p>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="我的考试">我的考试</el-tab-pane> -->
      <!-- 我的选课 -->
      <el-tab-pane label="我的选课">
        <ul class="courselist">
          <li
            @click="todetails(item)"
            v-for="(item, index) in courseselection"
            :key="index"
          >
            <img :src="item.cimg" alt="" srcset="" />
            <p class="text">{{ item.ctitle }}</p>
            <div class="left">
              <span>{{ item.ctype }}</span>
              .
              <span>{{ item.signup_number }}人报名</span>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <foot />
  </div>
</template>

<style lang="less" scoped>
.userbox {
  margin-top: 65px;
  height: 200px;
  background-image: url("../assets/images/coursebg.png");

  // 信息栏
  .avatar {
    width: 85%;
    height: inherit;
    line-height: inherit;
    margin: 0 auto;
    text-align: left;

    & > .imgbox {
      position: absolute;
      top: 110px;
      width: 100px;
      height: 100px;
      border-radius: 50%;

      //用户头像
      & .imgSize {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }

    & span {
      position: absolute;
      left: 300px;
      top: 150px;
      width: 200px;
      font-size: 20px;
      text-align: left;
      font-weight: bold;
      color: #fff;
    }

    & > .callsmsg {
      position: absolute;
      top: 100px;
      right: 150px;
      & > p {
        padding: 10px;
        color: #fff;
        font-size: 16px;
      }

      //个人账号设置
      & .person {
        width: 100px;
        height: 40px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 30px;
        margin-top: 10px;
      }
    }
  }
}

// 列表页
.item {
  position: relative;
  width: 85%;
  height: 565px;
  margin: 40px auto 0 auto;

  .worktitle {
    height: 50px;
    line-height: 50px;

    & > .worktime {
      float: left;
      margin-left: 15px;
      font-size: 16px;
      font-weight: bold;
    }

    & > .workbtn {
      width: 100px;
      height: 34px;
      line-height: 34px;
      float: right;
      margin-top: 7px;
      margin-right: 15px;
    }
  }
}

//课程列表
& .courselist {
  display: flex;
  flex-wrap: wrap;

  & > li {
    width: 22%;
    height: 250px;
    border-radius: 10px;
    box-shadow: @shadow;
    border: 1px solid #c0c0c0;
    cursor: pointer;
    margin: 0 15px 30px 15px;

    & > img {
      width: 100%;
      height: 60%;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    & > .text {
      width: 90%;
      padding: 8px 8px 8px 8px;
      text-align: left;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis; //超出带省略号
      display: -webkit-box; //盒子模型显示
      -webkit-line-clamp: 2; //显示2行
      -webkit-box-orient: vertical; //盒子垂直布置
    }

    & > .left {
      padding: @title;
      text-align: left;

      & > span {
        font-size: 12px;
        color: #9199a1;
      }

      & > .left {
        float: left;
        padding: @title;
        text-align: left;

        & > span {
          font-size: 12px;
          color: #9199a1;
        }
      }
    }
  }
}

// ————————————课程列表————————————
</style>

<script>
export default {
  data() {
    return {
      tabPosition: "left",
      //登录用户id
      userData: JSON.parse(sessionStorage.getItem("userData")),
      // 我的选课
      userclass: [],
      //图片地址
      imageUrl: "",
      courseselection: [],
      //我的课程
      mycourse: [],
      //我的作业
      mywork: [],
      // text: 'rec',
      //作业发布时间
      myworktime: [],
    };
  },
  methods: {
    // 点击的对象和获取的时间还需要进行校验
    towork(e, item) {
      if (e.target.getAttribute("data_id") == item.time) {
        this.$router.push({
          path: "./work",
          //传递对应后端数据的id
          query: {
            clicktime: e.target.getAttribute("data_id"),
            //用户id
            userid: this.userData.user_detail_id,
          },
        });
      }
    },
    personSet() {
      window.location.href = "/myset";
    },
  },
  mounted() {
    if (this.userData != null && this.userData.uimg != null) {
      this.imageUrl = "http://test.com:3000/user/img?url=" + this.userData.uimg;
    } else {
      this.imageUrl = require("../assets/images/6.jpg");
    }
    //我的课堂
    this.$http
      .post("http://test.com:3000/course/mycourse", {
        userid: this.userData.user_detail_id,
      })
      .then((res) => {
        this.mycourse = res.data;
      });
    //我的作业
    this.$http
      .post("http://test.com:3000/course/mywork", {
        userid: this.userData.user_detail_id,
      })
      .then((res) => {
        let myworkdata = res.data;
        //定义一个数组作为容器
        let timeDate = [];
        for (let i in myworkdata) {
          //遍历出来的时间
          let itime = myworkdata[i].release_time;

          //默认已经存在
          let isExist = false;
          let tempIndex = 0;
          //遍历timeDate 判断是否存在
          for (let j in timeDate) {
            if (timeDate[j].time == itime) {
              isExist = true;
              tempIndex = j;
            }
          }
          if (!isExist) {
            //日期不存在，创建日期并赋值空数组
            timeDate.push({
              time: itime,
              status: myworkdata[i].status,
              list: [myworkdata[i]],
            });
          } else {
            //存放到对应日期的数组中
            timeDate[tempIndex].list.push(myworkdata[i]);
          }
        }
        this.mywork = timeDate;
      });

    //将数据传送给我的选课
    this.$http
      .post("http://test.com:3000/course/courseselection", {
        userid: this.userData.user_detail_id,
      })
      .then((res) => {
        this.courseselection = res.data;
      });
  },
};
</script>